<template>
  账号：<input v-model="account" type="text" />
  <hr />
  员工薪资：<input v-model="emp.salary" type="number" />

  <hr />
  账号：<input v-model="account" type="text" />
  <button @click="stopWacthAccount">停止账号侦听器</button>
  <hr />
  密码：<input v-model="password" type="text" />
  <button @click="stopWacthPassword">停止密码侦听器</button>
</template>

<script setup>
import { reactive, ref, watchEffect, watchPostEffect } from 'vue' // 引入 watch 函数
let account = ref('Abc') // 账号
let emp = reactive({
  // 员工
  name: 'Jack',
  salary: 7000,
})

watchEffect(
  () => {
    // 创建成功后，监听到数据源立即执行一遍
    console.log('账号：' + account.value) // 如果此处用到了数据源，如果该数据源的值发生了变化，会重新执行该回调函数
    console.log('员工的薪资：' + emp.salary)
  },
  { flush: 'post' },
)

watchPostEffect(() => {
  // 侦听薪资
  console.log('=====================================')
  console.log('员工薪资：' + emp.salary)
  console.log(document.getElementById('titleSalary').innerHTML) // 回调函数的触发机制：在 Dom 更新之后
})

let stopWacthAccount = watchEffect(() => {
  // 调用 watchEffect 返回的函数，可以停止该侦听器
  console.log('-------------------------------------')
  console.log('账号：' + account.value)
})

let stopWacthPassword = watchPostEffect(() => {
  // 调用 watchPostEffect 返回的函数，可以停止该侦听器
  console.log('=====================================')
  console.log('密码：' + password.value)
})
</script>
